import 'package:flutter/material.dart';
import 'package:travel_app/pages/home_page.dart';
import 'package:travel_app/pages/my_page.dart';
import 'package:travel_app/pages/search_page.dart';
import 'package:travel_app/pages/travel_page.dart';

class TabNavigator extends StatefulWidget {
  @override
  _TabNavigatorState createState() => _TabNavigatorState();
}

class _TabNavigatorState extends State<TabNavigator> {
  final _defaultColor = Colors.grey;
  final _activeColor = Colors.blue;
  int _current = 0;
  final PageController _container = PageController(
    // 初始为0
    initialPage: 0,
  );
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        controller: _container,
        children: <Widget>[
          // 这个是页面的排序
          HomePage(),
          SearchPage(),
          TarvelPage(),
          MyPage()
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        // 当前导航index
        currentIndex: _current,
        onTap: (index){
          // 点击跳转页面
          _container.jumpToPage(index);
          // 设置为当前页的index
          setState(() {
           _current = index; 
          });
        },
        // items是tabbar的排序
        items: [
        BottomNavigationBarItem(
            icon: Icon(
              Icons.home,
              color: _defaultColor,
            ),
            activeIcon: Icon(
              Icons.home,
              color: _activeColor,
            ),
            title: Text(
              '首页',
              style: TextStyle(
                color: _current != 0 ? _defaultColor : _activeColor,
              ),
            )),
        BottomNavigationBarItem(
            icon: Icon(
              Icons.search,
              color: _defaultColor,
            ),
            activeIcon: Icon(
              Icons.search,
              color: _activeColor,
            ),
            title: Text(
              '搜索',
              style: TextStyle(
                color: _current != 1 ? _defaultColor : _activeColor,
              ),
            )),
        BottomNavigationBarItem(
            icon: Icon(
              Icons.camera_alt,
              color: _defaultColor,
            ),
            activeIcon: Icon(
              Icons.camera_alt,
              color: _activeColor,
            ),
            title: Text(
              '旅游',
              style: TextStyle(
                color: _current != 2 ? _defaultColor : _activeColor,
              ),
            )),
        BottomNavigationBarItem(
            icon: Icon(
              Icons.account_circle,
              color: _defaultColor,
            ),
            activeIcon: Icon(
              Icons.account_circle,
              color: _activeColor,
            ),
            title: Text(
              '我的',
              style: TextStyle(
                color: _current != 3 ? _defaultColor : _activeColor,
              ),
            ))
      ]),
    );
  }
}
